import { computed } from 'vue'
import { useAppStore } from '@/store/modules/app'
import { Logo } from '@/components/Logo'
import ToolHeader from '@/layout/components/ToolHeader.vue'
import { ElScrollbar } from 'element-plus'
import { useDesign } from '@/hooks/web/useDesign'
import SystemList from './SystemList.vue'

const { getPrefixCls } = useDesign()

const prefixCls = getPrefixCls('layout')

const appStore = useAppStore()

const pageLoading = computed(() => appStore.getPageLoading)

// logo
const logo = computed(() => appStore.logo)

// 固定头部
const fixedHeader = computed(() => appStore.getFixedHeader)

export const useRenderLayout = () => {
  const renderTop = () => {
    return (
      <>
        <div class={['flex items-center justify-between bg-[var(--top-header-bg-color)] relative']}>
          {logo.value ? <Logo class="custom-hover"></Logo> : undefined}
          <ToolHeader></ToolHeader>
        </div>
        <div
          class={[
            `${prefixCls}-content`,
            'w-full',
            {
              'h-[calc(100%-var(--top-tool-height))]': !fixedHeader.value,
              'h-[calc(100%-var(--tags-view-height)-var(--top-tool-height))]': fixedHeader.value
            }
          ]}
        >
          <ElScrollbar
            v-loading={pageLoading.value}
            class={[
              `${prefixCls}-content-scrollbar`,
              {
                'mt-[var(--tags-view-height)] !pb-[calc(var(--tags-view-height)+var(--app-footer-height))]':
                  fixedHeader.value,
                'pb-[var(--app-footer-height)]': !fixedHeader.value
              }
            ]}
          >
            <SystemList></SystemList>
          </ElScrollbar>
        </div>
      </>
    )
  }

  return {
    renderTop
  }
}
